import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react-native";
import { MyButton } from "./Button";
import { View, Image } from "react-native";

const MyButtonMeta: ComponentMeta<typeof MyButton> = {
  title: "MyButton",
  component: MyButton,
  args: {
    text: "Hello world",
  },

  // 在此处使用自定义装饰器 存在代码生成缺陷，组件显示为no display name
  // decorators: [
  //   (Story) => (
  //     <View style={{ padding: 16 }}>
  //       <Story />
  //     </View>
  //   ),
  // ],
  // decorators: [
  //   (Story) => (
  //     <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
  //       <Story />
  //     </View>
  //   ),
  // ],
  
  // 在此处定义默认背景色
  // parameters: {
  //   backgrounds: {
  //     values: [
  //       // { name: 'red', value: '#f00' },
  //       { name: 'green', value: '#0f0' },
  //       // { name: 'blue', value: '#00f' },
  //     ],
  //   },
  // },
};

export default MyButtonMeta;

type MyButtonStory = ComponentStory<typeof MyButton>;

export const Basic: MyButtonStory = (args) => <MyButton {...args} />;

// export default {
//   title: 'Button',
//   component: Button,
//   decorators: [
//     (Story) => (
//       <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
//         <Story />
//       </View>
//     ),
//   ],
//   parameters: {
//     backgrounds: {
//       values: [
//         { name: 'red', value: '#f00' },
//         { name: 'green', value: '#0f0' },
//         { name: 'blue', value: '#00f' },
//       ],
//     },
//   },
// };